import React from 'react';

// 导入组件
import CommentCount from './components/CommentCount';
import CommentList from './components/CommentList';
import Forms from './components/Forms';
import Tabs from './components/Tabs';

// 导入样式
import './App.css';

export class App extends React.Component {
  constructor() {
    super();
    // 组件数据
    this.state = {
      // hot: 热度排序  time: 时间排序
      tabs: [
        {
          id: 1,
          name: '热度',
          type: 'hot',
        },
        {
          id: 2,
          name: '时间',
          type: 'time',
        },
      ],
      active: 'time',
      list: [
        {
          id: 1,
          author: '刘德华',
          comment: '给我一杯忘情水',
          time: '2022-10-10 09:09:00',
          // 1: 点赞 0：无态度 -1:踩
          attitude: 1,
        },
        {
          id: 2,
          author: '周杰伦',
          comment: '哎哟，不错哦',
          time: '2021-10-10 09:09:00',
          // 1: 点赞 0：无态度 -1:踩
          attitude: 0,
        },
        {
          id: 3,
          author: '五月天',
          comment: '不打扰，是我的温柔',
          time: '2021-10-11 10:09:00',
          // 1: 点赞 0：无态度 -1:踩
          attitude: -1,
        },
      ],
    };
  }
  // 父组件定义tab切换事件处理函数
  changeSortType = (type) => {
    console.log(type);
    if (type === 'hot') {
      const newList = this.state.list.sort((a, b) => {
        // 按照id降序
        return b.id - a.id;
      });
      this.setState({
        list: newList,
        active: type,
      });
    } else {
      // 按时间
      const newList = this.state.list.sort((a, b) => {
        // 按照时间升序
        return new Date(a.time).getTime() - new Date(b.time).getTime();
      });
      this.setState({
        list: newList,
        active: type,
      });
    }
  };

  // 删除评论事件处理函数
  delComment = (id) => {
    console.log(id);
    // 删除指定id的评论
    const newList = this.state.list.filter((item) => item.id !== id);
    // 设置页面数据
    this.setState({
      list: newList,
    });
  };

  // 点赞点踩实现
  changeAttitude = (id, attitude) => {
    console.log(id, attitude);
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        return { ...item, attitude };
      } else {
        return item;
      }
    });
    // 设置页面数据
    this.setState({
      list: newList,
    });
  };

  // 发表评论
  addComment = (txt) => {
    console.log(txt);
    const comment = {
      id: new Date().getTime(),
      author: '杨文中',
      comment: txt,
      time: new Date().toLocaleString(),
      attitude: -1,
    };
    // 设置页面数据
    this.setState({
      list: [comment, ...this.state.list],
    });
  };

  render() {
    return (
      <div className="comment-container">
        <CommentCount number={this.state.list.length} />
        <Tabs
          tabs={this.state.tabs}
          active={this.state.active}
          changeSortType={this.changeSortType}
        />
        <Forms addComment={this.addComment} />
        <CommentList
          list={this.state.list}
          delComment={this.delComment}
          changeAttitude={this.changeAttitude}
        />
      </div>
    );
  }
}
